<div draggable mat-dialog-title>
  <h6>{{"editPhealthInfo" | translate}} - {{person.personName}}</h6>
</div>

<div mat-dialog-content class="wdl-dialog-content">
  <form [formGroup]="healthForm" class="form-container" novalidate autocomplete="off">
    <mat-grid-list cols="4" rowHeight="70px" gutterSize="10">
      <mat-grid-tile colspan="2">
        <mat-form-field>
          <input formControlName="heartUp" matInput placeholder="{{'heartUp' | translate}}">
        </mat-form-field>
      </mat-grid-tile>

      <mat-grid-tile colspan="2">
        <mat-form-field>
          <input formControlName="heartLow" matInput placeholder="{{'heartLow' | translate}}">
       </mat-form-field>
     </mat-grid-tile>

     <mat-grid-tile colspan="2">
       <mat-form-field>
         <input formControlName="breatheUp" matInput placeholder="{{'breatheUp' | translate}}">
        </mat-form-field>
      </mat-grid-tile>

      <mat-grid-tile colspan="2">
        <mat-form-field>
          <input formControlName="breatheLow" matInput placeholder="{{'breatheLow' | translate}}">
        </mat-form-field>
      </mat-grid-tile>

      <mat-grid-tile colspan="2">
        <mat-form-field>
          <input formControlName="move" matInput placeholder="{{'moveThreshold' | translate}}">
        </mat-form-field>
      </mat-grid-tile>

      <mat-grid-tile colspan="2">
        <mat-form-field>
          <mat-select formControlName="turnOverReminder" placeholder="{{'turnOverReminder' | translate}}">
            <mat-option [value]="0">{{'noReminder' | translate}}</mat-option>
            <mat-option [value]="90">1.5 {{'hours' | translate}}</mat-option>
            <mat-option [value]="120">2 {{'hours' | translate}}</mat-option>
            <mat-option [value]="180">3 {{'hours' | translate}}</mat-option>
            <mat-option [value]="240">4 {{'hours' | translate}}</mat-option>
          </mat-select>
        </mat-form-field>
      </mat-grid-tile>

      <mat-grid-tile colspan="1" class="wdl-checkbox">
        <mat-checkbox formControlName="awayAlarm" [disableRipple]="true">{{'awayAlarm' | translate}}</mat-checkbox>
      </mat-grid-tile>
      <mat-grid-tile colspan="1" class="wdl-checkbox">
        <mat-checkbox formControlName="upAlarm" [disableRipple]="true">{{'upAlarm' | translate}}</mat-checkbox>
      </mat-grid-tile>
      <mat-grid-tile colspan="1" class="wdl-checkbox">
        <mat-checkbox formControlName="sideAlarm" [disableRipple]="true">{{'sideAlarm' | translate}}</mat-checkbox>
      </mat-grid-tile>
      <mat-grid-tile colspan="1" class="wdl-checkbox">
        <mat-checkbox formControlName="silent" [disableRipple]="true">{{'silent' | translate}}</mat-checkbox>
      </mat-grid-tile>
    </mat-grid-list>
  </form>
</div>

<div mat-dialog-actions>
  <button mat-button (click)="dialogRef.close('Close')">{{'close' | translate}}</button>
  <button mat-button (click)="submit()" [disabled]="!healthForm.dirty">{{'submit' | translate}}</button>
</div>
